﻿{extend name="public:base" /}

{block name="css"}
<style>
    .set-font {
        font-size: 18px;
        font-weight: bold;
        margin-right: 50px;
    }

    .message-box {
        display: flex;
        padding: 0;
        flex-wrap: wrap;
    }

    .message-box .message-box-item {
        display: flex;
        align-items: center;
        width: 42%;
        margin-bottom: 20px;
    }

    .message-box .input {
        max-width: 58%;
        margin-right: 10px;
    }

    .top {
        display: flex;
        align-items: center;
    }

    .btn-del {
        background: red;
        color: #fff;
    }

</style>{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <form method="post" class="row">
        <div class="ibox col-lg-12">
            <div class="ibox-content">
                <div id="rules-box">

                </div>

                <div class="hr-line-dashed"></div>
                <div class="form-group row">
                    <div class="col-sm-4 col-sm-offset-2">
                        <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                        <button type="button" class="btn btn-w-m btn-primary confirm-save">提交</button>
                    </div>
                </div>
            </div>

        </div>
    </form>
</div>{include file="public/cropper-img-mask" cropper_uploaded_img_ids="cropper_uploaded_img_ids" cropper_uploaded_img_paths="cropper_uploaded_img_paths" crop_preview_box="crop-preview-box" /}

{include file="public/preview-img-mask" swiper-id="cropper-preview" /}

{/block}

{block name='js'}
<script>
    var list = {$list_json};

    renderRoleRules();

    // 新增规则
    function addRules(index) {
        var empty_obj = {money: '', rate: ''}
        list[index].rules.push(empty_obj);
        renderRoleRules();
    }

    // 删除规则
    function delRules(index, i) {
        list[index].rules.splice(i, 1);
        renderRoleRules();
    }

    // 修改达成业绩
    function changeMoney(that, index, i) {
        list[index].rules[i].money = $(that).val();
    }

    // 修改提成百分比
    function changeRate(that, index, i) {
        list[index].rules[i].rate = $(that).val();
    }

    function renderRoleRules() {
        var html = '';
        if (list.length > 0) {
            list.forEach((val, key) => {
                var rules_html = '';
                if (val.rules.length > 0) {
                    val.rules.forEach((v, k) => {
                        rules_html += `<div class="message-box col-sm-8">
                            <div class="message-box-item">
                                <input type="number" class="form-control input" placeholder="请输入达成业绩" oninput="changeMoney(this, ${key}, ${k})" value="${v.money}">
                                <input type="number" class="form-control input" placeholder="请输入提成百分比" oninput="changeRate(this, ${key}, ${k})" value="${v.rate}">
                                <button type="button" class="btn btn-w-m btn-del" onclick="delRules(${key}, ${k})">删除规则</button>
                            </div>
                        </div>`;
                    })
                }

                html += `<div class="line">
                    <div class="top">
                        <div class="set-font">${val.name}</div>
                        <button type="button" class="btn btn-w-m btn-primary" onclick="addRules(${key})">新增规则</button>
                    </div>
                    <div class="hr-line-dashed"></div>

                    <div class="set-box">
                        ${rules_html}
                    </div>
                </div>`;
            })
        }

        $('#rules-box').html(html);
    }

    $('.confirm-save').click(function (){
        $.post("{:url('setRule')}", {list: list}, function (res) {
            if (res.result == 1) {
                layer.msg(res.msg, {icon: 1, time: 1500}, function () {
                    window.location.href = "{:url('setRule')}";
                });
            } else {
                layer.msg(res.msg, {icon: 2, time: 1500});
            }
        }, 'json')
    })
</script>{/block}
